<template>
	<view class="page">
		<view class="topbar">
			该挂号订单还未就诊，请按预约时间及时就诊
		</view>
		<view class="success_status">
			<view class="success_Icon">
				<view class="left">
					
				</view>
				<view class="right">
					
				</view>
			</view>
			<view class="success_text">
				挂号成功
			</view>
		</view>
		<!-- 就诊人 -->
		<view class="patient_info">
			<view class="infos">
				<view class="info_title">
					就诊人
				</view>
				<view class="info_content">
					汪致远
				</view>
			</view>
			<view class="infos">
				<view class="info_title">
					登记号
				</view>
				<view class="info_content">
					2015******10
				</view>
			</view>
		</view>
		<view class="patient_info">
			<view class="infos">
				<view class="info_title">
					挂号医生
				</view>
				<view class="info_doctor">
					<image style="width: 36rpx;" :src="doctorInfo.avator" mode="widthFix"></image>
					<view class="name">
						{{doctorInfo.name}}（{{doctorInfo.call}}）
					</view>
				</view>
			</view>
			<view class="infos">
				<view class="info_title">
					就诊医院
				</view>
				<view class="info_content">
					{{campus}}
				</view>
			</view>
			<view class="infos">
				<view class="info_title">
					挂号科室
				</view>
				<view class="info_content">
					{{doctorInfo.depart}}
				</view>
			</view>
			<view class="infos">
				<view class="info_title">
					挂号费用
				</view>
				<view class="info_content">
					￥{{doctorInfo.price.toFixed(2)}}
				</view>
			</view>
			<view class="infos">
				<view class="info_title">
					预约时间
				</view>
				<view class="info_content" style="font-weight: 700;">
					{{dateInfo.dates.year}}-{{dateInfo.dates.month<10?'0'+dateInfo.dates.month:dateInfo.dates.month}}-{{dateInfo.dates.day<10?'0'+dateInfo.dates.day:dateInfo.dates.day}} {{dateInfo.farewell=='上午'?'08:30-12:00':'14:00-18:00'}}({{dateInfo.farewell}})
				</view>
			</view>
		</view>
		<view class="patient_info">
			<view class="infos">
				<view class="info_title">
					科室地址
				</view>
				<view class="info_content">
					门诊一部五层C区203诊室
				</view>
			</view>
			
		</view>
		<!-- 取消挂号 -->
		<button class="concel" @click="goback">返回首页</button>
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { getWeekDates } from '../../src/utils/date.js'
	import api from '../../src/utils/api.js'
	import { reactive, ref } from 'vue'
	const weekDates = getWeekDates()
	const dateInfo = reactive({
		dates:{},
		farewell:''
	})	//日期信息
	const doctorInfo = ref({
		price:100
	})	//医生信息
	const campus = uni.getStorageSync('campus')
	onLoad((option)=>{
		dateInfo.dates = weekDates[option.dateInfo]
		dateInfo.farewell = option.farewell
		api('/doctorinfoApp',{
			doctorID:option.doctorID
		}).then(res=>{
			doctorInfo.value = res[0]
		}).catch(err=>{
			console.log(err)
		})
	})
	// 返回首页
	const goback = () => {
		uni.switchTab({
			url:'/pages/index/index'
		})
	}
</script>

<style lang="scss" scoped>
	.page{
		background-color: rgba(242, 242, 242, 1);
		min-height: 100vh;
		.topbar{
			width: 100%;
			height: 58rpx;
			border-radius: 4rpx;
			line-height: 58rpx;
			text-align: center;
			background-color: rgba(230, 244, 255, 1);
			color: #1677FF;
			font-family: 'Microsoft YaHei UI', sans-serif;
			font-size: 24rpx;
		}
		.success_status{
			width: 100%;
			height: 130rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			padding-left: 50rpx;
			box-sizing: border-box;
			.success_Icon{
				width: 70rpx;
				height: 70rpx;
				background-color: rgba(54, 207, 201, 1);
				border-radius: 50%;
				position: relative;
				.left{
					width: 4rpx;
					height: 14rpx;
					background-color: #fff;
					border-radius: 40rpx;
					transform: rotate(135deg);
					position: absolute;
					left: 24rpx;
					top: 32rpx;
				}
				.right{
					width: 4rpx;
					height: 28rpx;
					background-color: #fff;
					border-radius: 40rpx;
					transform: rotate(45deg);
					position: absolute;
					top: 20rpx;
					left: 36rpx;
				}
			}
			.success_text{
				font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
				font-size: 36rpx;
				font-weight: 700;
				color: #000;
				margin-left: 30rpx;
			}
		}
		// 就诊人
		.patient_info{
			background-color: #fff;
			padding-left: 30rpx;
			box-sizing: border-box;
			margin-top: 30rpx;
			.infos{
				height: 100rpx;
				display: flex;
				align-items: center;
				font-family: 'Microsoft YaHei UI', sans-serif;
				font-size: 28rpx;
				color: #000;
				border-bottom: 2rpx solid #f2f2f2;
				.info_title{
					width: 114rpx;
					color: #7f7f7f;
					margin-right: 62rpx;
				}
				.info_doctor{
					height: 36rpx;
					display: flex;
					align-items: center;
					.name{
						margin-left: 10rpx;
					}
				}
			}
		}
		// 取消挂号
		.concel{
			width: 650rpx;
			height: 80rpx;
			line-height: 80rpx;
			background-color: #fff !important;
			border-radius: 16rpx;
			font-family: 'ArialMT', 'Arial', sans-serif;
			font-size: 24rpx;
			color: #333333;
			position: fixed;
			bottom: 40rpx;
			border: none !important;
			left: 50%;
			transform: translateX(-50%);
			cursor: pointer;
		}
	}       
</style>
